<template>
  <div class="allinfo"
       style="height:900px">
    <!-- 第一行 -->
    <div class="hhh">
      <span style="font-weight:bold;position: relative; margin-left:20px;top:15px">新增打包单(按上游单打包)</span>
      <div class="submitandcancel">
        <el-button type="primary"
                   @click="back"
                   icon="el-icon-success">返回</el-button>
        <el-button type="primary"
                   @click="cancel_table"
                   icon="el-icon-s-promotion">提交</el-button>
      </div>
      <hr>
    </div>
    <!-- 基本信息栏 -->
    <div>
      <!-- 第二行 -->
      <div>
        <span class="infoborder">基本信息</span>
      </div>
      <!-- 选填信息 -->
      <div style="margin-top:20px">
        <el-form :inline="true"
                 :label-position="left"
                 label-width="80px"
                 :model="formLabelAlign">
          <el-row>
            <el-col span="7"
                    offset="1">
              <el-form-item label="表单类型">
                <el-select v-model="formdata.ordertype"
                           placeholder="请选择">
                  <el-option v-for="item in formLabelAlign.ordertype"
                             :key="item.label"
                             :label="item.label"
                             :value="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col span="7"
                    offset="1"
                    style="margin-left:55px">
              <el-form-item label="仓库">
                <el-select v-model="formdata.warehouse"
                           placeholder="请选择">
                  <el-option v-for="item in formLabelAlign.warehouse"
                             :key="item.label"
                             :label="item.label"
                             :value="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col span="7"
                    offset="1"
                    style="margin-left:0px">
              <el-form-item label="客户">
                <el-select v-model="formdata.client"
                           placeholder="请选择">
                  <el-option v-for="item in formLabelAlign.client"
                             :key="item.label"
                             :label="item.label"
                             :value="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

          </el-row>

          <el-row>

            <el-col span="7"
                    style="margin-left:70px">
              <el-form-item label="打单号">
                <el-input v-model="formdata.order_num"
                          disabled="true"></el-input>
              </el-form-item>
            </el-col>

            <el-col span="7"
                    offset="1"
                    style="margin-left:55px">
              <el-form-item label="产品线">
                <el-select v-model="formdata.productline "
                           placeholder="请选择">
                  <el-option v-for="item in formLabelAlign.productline"
                             :key="item.label"
                             :label="item.label"
                             :value="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col span="7"
                    offset="1"
                    style="margin-left:0px">
              <el-form-item label="成色">
                <el-select v-model="formdata.purity"
                           placeholder="请选择">
                  <el-option v-for="item in formLabelAlign.purity"
                             :key="item.label"
                             :label="item.label"
                             :value="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>

            <el-col span="7"
                    offset="1"
                    style="margin-left:70px">
              <el-form-item label="状态">
                <el-select v-model="formdata.status"
                           placeholder="请选择">
                  <el-option v-for="item in formLabelAlign.status"
                             :key="item.label"
                             :label="item.label"
                             :value="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col span="7"
                    style="margin-left:70px">
              <el-form-item label="制单时间">
                <el-input v-model="formdata.makingtime"
                          disabled="true"></el-input>
              </el-form-item>
            </el-col>

            <el-col span="7">
              <el-form-item label="打包方式">
                <el-input v-model="formdata.packingtype"
                          disabled="true"></el-input>
              </el-form-item>
            </el-col>

          </el-row>

        </el-form>
      </div>
    </div>
    <!-- 选货单信息栏 -->
    <div>
      <div>
        <span class="infoborder">选货单信息</span>

        <div class="submitandcancel">
          <el-button type="primary"
                     icon="el-icon-s-order"
                     @click="test">打包</el-button>
          <el-button type="primary"
                     style="float:right"
                     @click="table = true"
                     icon="el-icon-circle-plus-outline">
            添加
          </el-button>
        </div>

        <!-- 添加按钮里的数据展示 -->
        <el-drawer title="选择客户的商品"
                   :visible.sync="table"
                   direction="ttb"
                   size="50%">
          <el-table ref="multipleTable"
                    :data="gridData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
            <el-table-column type="selection"
                             width="55">
            </el-table-column>
            <el-table-column label="序号"
                             width="120"
                             prop="id">
            </el-table-column>
            <el-table-column prop="goodsname"
                             label="产品名称"
                             width="300">
            </el-table-column>
            <el-table-column prop="client"
                             label="客户">
            </el-table-column>
            <el-table-column prop="purity"
                             label="成色"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="weight"
                             label="重量"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="amount"
                             label="数量"
                             show-overflow-tooltip>
            </el-table-column>
          </el-table>
          <div style="margin-top: 100px;margin-left:800px">
            <el-button @click="addconfirm">确定</el-button>
            <el-button>取消</el-button>
          </div>
        </el-drawer>
      </div>
      
        <!-- 选货单信息 -->
      <el-table :data="selectorderlist"
                style="width: 2000px"
                ref="multipleTable"
                tooltip-effect="dark"
                @selection-change="handleSelectionChange">

        <el-table-column type="selection"
                         width="55">
        </el-table-column>

        <el-table-column prop="goodsinfo"
                         label="选货单号">
        </el-table-column>
        <el-table-column prop="goodsname"
                         label="产品名称">
        </el-table-column>
        <el-table-column prop="client"
                         label="客户"
                         width="150">
        </el-table-column>
        <el-table-column prop="purity"
                         label="成色"
                         width="150">
        </el-table-column>
        <el-table-column prop="weight"
                         label="重量"
                         width="150">
        </el-table-column>
        <el-table-column prop="amount"
                         label="数量"
                         width="150">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="danger"
                       icon="el-icon-delete"
                       circle
                       @click.native.prevent="deleteRow(scope.$index, selectorderlist)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="1"
                     :page-sizes="[10, 20, 30]"
                     :page-size="10"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="80">
      </el-pagination>
      <!-- 打包信息 -->
      <div style="height:50px">
        <span class="infoborder">打包信息</span>

      </div>
      <!-- 打包单展示 -->
      <el-table :data="packinginfoshow"
                style="width: 2000px"
                ref="multipleTable">

        <el-table-column prop="packingnum"
                         label="单号">
        </el-table-column>
        <el-table-column prop="client"
                         label="客户名称">
        </el-table-column>
        <el-table-column prop="barecode"
                         label="条码"
                         width="150">
        </el-table-column>
        <el-table-column prop="client"
                         label="仓库"
                         width="150">
        </el-table-column>
        <el-table-column prop="purity"
                         label="成色"
                         width="150">
        </el-table-column>
        <el-table-column prop="weight"
                         label="重量"
                         width="150">

        </el-table-column>
        <el-table-column prop="amount"
                         label="数量"
                         width="150">
        </el-table-column>
        <el-table-column prop="extra_g_for_fee"
                         label="附加克工费">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="danger"
                       @click.native.prevent="open(scope.$index,packinginfoshow)">删除</el-button>
            <el-button type="primary"
                       @click="detailinfo = true">详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 详情弹框信息 -->
      <el-dialog title="打包单"
                 :visible.sync="detailinfo"
                 width="30%"
                 :before-close="handleClose">
        <span>
          <el-descriptions title="">
            <el-descriptions-item label="单号">1312313113</el-descriptions-item>
            <el-descriptions-item label="表单类型">黄金首饰</el-descriptions-item>
            <el-descriptions-item label="条码">13123132</el-descriptions-item>
            <el-descriptions-item label="产品名称">中国黄金金项链成色999</el-descriptions-item>
            <el-descriptions-item label="成色">千足金9999</el-descriptions-item>
            <el-descriptions-item label="重量">134（g）</el-descriptions-item>
            <el-descriptions-item label="数量">123</el-descriptions-item>
            <el-descriptions-item label="付加工费">3</el-descriptions-item>
          </el-descriptions>
        </span>
        <span slot="footer"
              class="dialog-footer">
          <el-button @click="detailinfo = false">取 消</el-button>
          <el-button type="primary"
                     @click="detailinfo = false">打印</el-button>
        </span>
      </el-dialog>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      aaa: 'asdfasd',

      //被勾选加入打包列表的产品
      multipleSelection: [],
      //添加按钮
      table: false,
      // 被勾选打包产品的数组
      packinggoods: [],
      //设置删除按钮
      deleteinfo: false,
      //设置详情键按钮
      detailinfo: false,
      // 基础信息
      formdata: {
        ordertype: '',
        warehouse: '',
        client: '',
        warehouse: '',
        status: '',
        productline: '',
        makingtime: this.getTime(),
        order_num: this.createOrder(),
        packingtype: '',
      },

      formLabelAlign: {
        name: '',
        region: '',
        type: 'aaa',
        ordertype: [
          {
            label: '采购入库',
          },
        ],
        warehouse: [
          {
            label: 'A仓库',
          },
          {
            label: 'B仓库',
          },
        ],
        client: [
          {
            label: '小王',
          },
          {
            label: '老王',
          },
        ],
        status: [
          {
            label: '草稿',
          },
          {
            label: '已完成',
          },
        ],
        productline: [
          {
            label: '生产线A',
          },
          {
            label: '生产线B',
          },
        ],
        purity: [
          {
            label: '999金',
          },
          {
            label: '9999金',
          },
        ],
      },
      //生成的打包信息展示
      packinginfoshow: [
        {
          id: 1,
          packingnum: '1312312',
          client: '老王',
          barecode: '13123',
          warehouse: '0220202',
          purity: '千足金',
          weight: 1.3,
          amount: 20,
          extra_g_for_fee: 5,
        },
      ],

      //被选择的选货单信息
      selectorderlist: [
        {
          id: 1,
          goodsinfo: 11,
          goodsname: '千足金',
          barecode: '0220202',
          client: '张三',
          purity: '千足金',
          weight: 1.3,
          amount: 20,
          extra_g_for_fee: 5,
        },
        {
          id: 1,
          goodsinfo: 11,
          goodsname: '千足金',
          barecode: '0220202',
          client: '张三',
          purity: '千足金',
          weight: 1.3,
          amount: 20,
          extra_g_for_fee: 5,
        },
        {
          id: 1,
          goodsinfo: 11,
          goodsname: '千足金',
          barecode: '0220202',
          client: '张三',
          purity: '千足金',
          weight: 1.3,
          amount: 20,
          extra_g_for_fee: 5,
        },
      ],
      //添加按钮里的数据
      // 添加商品信息
      table: false,
      loading: false,
      gridData: [
        {
          id: 1,
          goodsname: '千足金',
          client: '张狗',
          purity: '千足金',
          weight: 1.3,
          amount: 20,
        },
        {
          id: 1,
          goodsname: '千足金',
          client: '张狗',
          purity: '千足金',
          weight: 1.3,
          amount: 20,
        },
        {
          id: 1,
          goodsname: '千足金',
          client: '张狗',
          purity: '千足金',
          weight: 1.3,
          amount: 20,
        },
      ],
    }
  },
  methods: {

    back(){
          this.$router.push({ path: 'packingorder' })
    },

    //删除当前行
    deleteRow(index, rows) {
      rows.splice(index, 1)
      var selectorderlist = this.selectorderlist
    },

    //打包按钮
    test() {
      alert(this.$data.packinggoods)
    },

    add_table: {
      //提交选货单
    },
    cancel_table: {
      //取消填写的选货单
    },

    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    //获取当前制表时间
    getTime() {
      var date1 = new Date()
      var year = date1.getFullYear()
      var month = date1.getMonth() + 1
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      var day = date1.getDate()
      if (day >= 1 && day <= 9) {
        day = '0' + day
      }
      var hours = date1.getHours()
      if (hours >= 1 && hours <= 9) {
        hours = '0' + hours
      }
      var minutes = date1.getMinutes()
      if (minutes >= 1 && minutes <= 9) {
        minutes = '0' + minutes
      }
      var seconds = date1.getSeconds()
      if (seconds >= 1 && seconds <= 9) {
        seconds = '0' + seconds
      }
      return (
        year +
        '-' +
        month +
        '-' +
        day +
        ' ' +
        hours +
        ':' +
        minutes +
        ':' +
        seconds
      )
    },

    //生成订单号
    createOrder() {
      var date = new Date()
      var ordernum = 'DB' + date.getTime()
      console.log(date)
      return ordernum
    },

    // 全选功能方法
    handleSelectionChange(val) {
      this.multipleSelection = val
    },

    // 设置删除按钮
    open(index, rows) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
          rows.splice(index, 1)
          var packinginfoshow = this.packinginfoshow
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    // 添加确定按钮
    addconfirm() {
      // alert(this.$data.multipleSelection)
      console.log(this.$data.multipleSelection)
    },
  },
  created() {
    let packingtype = '按上游单打包'
    this.formdata.packingtype = packingtype
  },
}
</script>

<style scoped>
.submitandcancel {
  margin-left: 1450px;
  margin-top: -13px;
}
.allinfo {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.infoborder {
  border-style: solid;
  padding-left: 10px;
  margin-left: 10px;
  position: relative;
  top: 10px;
  border-color: white white white skyblue;
}
</style>
